<template>
  <div class="about">
    <el-upload
      class="upload-demo"
      ref="upload"
      action=""
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :auto-upload="false"
      :on-change="handleExceed"
      :http-request="uploadHttpRequest"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      fileList: [
        // {
        //   name: "food.jpeg",
        //   url:
        //     "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
        // {
        //   name: "food2.jpeg",
        //   url:
        //     "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
      ],
      file: {}
    };
  },
  methods: {
    uploadHttpRequest(params) {
      console.log('params', params)
    },
    async handleExceed(file, fileList) {
      console.log('file', file, fileList)
      this.fileList = fileList;
      this.file = file;
    },
    async submitUpload() {
      console.log('this',this.fileList)
      const formData = new FormData();
      // 当然也可以在此基础上，添加其他数据
      formData.append("file", this.fileList[0].raw);
      console.log('formData: ', formData)
      const data = await axios({
            url: 'http://localhost:5555/api/ufile',
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            data: formData,
            method: "post"
      })
      // const data = await axios.post('http://localhost:5555/api/ufile', {
      //   headers: {
      //         'Content-Type': 'multipart/form-data'
      //       },
      //   file: formData
      // })
      console.log('data', data)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>
